<template>
    <div>
        <a-button @click="addItem()">添加步骤</a-button>
        <draggable v-if="steps.length > 0"
                   tag="div"
                   :list="steps"
                   class="steps-area list-group"
                   v-bind="dragOptions"
                   @start="isDragging = true"
                   @end="isDragging = false"
                   @change="resetOrder"
                   handle=".handle">
            <transition-group type="transition" name="flip-list">
                <FunnelStep class="list-group-item handle" v-for="(item, index) in steps" :key="item.key" v-bind:steps="steps" v-bind:index="index" v-bind:properties="properties" v-bind:events="events" v-bind:datasourceId="datasourceId"></FunnelStep>
            </transition-group>
        </draggable>
    </div>
</template>

<script>
    import FunnelStep from './FunnelStep.vue'
    import draggable from 'vuedraggable'
    export default {
        name: "FunnelStepGroup",
        components: { FunnelStep, draggable },
        props: {
            steps: Array,
            properties: Array,
            events: Array,
            datasourceId: Number
        },
        data: function() {
            return {
                isDragging: false
            }
        },
        methods: {
            addItem: function () {
                this.steps.push({
                    key: Math.random().toString(36).substr(2),
                    name: '',
                    event: '',
                    order: this.steps.length+1,
                    filter: {
                        condition: 'AND',
                        rules: [],
                        filters: []
                    }
                });
            },
            // removeItem: function (index) {
            //     this.steps.splice(index, 1);
            // },
            resetOrder: function () {
                console.log('resetOrder');
                for(let i = 0; i < this.steps.length; i++) {
                    this.steps[i].order = i+1;
                }
            }
        },
        computed: {
            dragOptions() {
                return {
                    animation: 0,
                    group: "description",
                    disabled: false,
                    ghostClass: "ghost"
                };
            }
        }
    }
</script>

<style scoped>
    .steps-area {
        background-color: rgb(247, 247, 247);
        padding: 10px;
        display: block;
        position: relative;
        margin-top: 10px;
    }
    .flip-list-move {
        transition: transform 0.5s;
    }
    .no-move {
        transition: transform 0s;
    }
    .ghost {
        opacity: 0.5;
        background: #c8ebfb;
    }
    .list-group {
        min-height: 20px;
    }
    .list-group-item {
        cursor: move;
    }
</style>